<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>车辆维修申请</title>
    <script src="/assets/js/config.js"></script>
    <link rel="stylesheet" type="text/css" href="css/apply.css"/>
</head>
<body>
<form id="fm">
    <button onclick="printPage()" style="float: right;" id="button">打印</button>
    <div>
        <div>
            <h2 align=" center" id="title">车辆维修申请</h2>
            <p>申请日期： <span id="crtDate"></span></p>
        </div>
    </div>
    <table border="1" style="border-collapse: collapse;width: 100%">
        <tr>
            <td>申请人姓名</td>
            <td><input class="layui-input" v-model="form.userName" readonly></td>
            <td>部门</td>
            <td><input class="layui-input" v-model="form.department" readonly></td>
        </tr>
        <tr>
            <td>车牌号</td>
            <td>
                <input class="layui-input" v-model="form.carNum">
                <!--<input class="easyui-datebox" editable="false" name="leaveDate" id="startDate">-->
            </td>
            <td>驾驶员</td>
            <td>
                <input class="layui-input" v-model="form.driver">
                <!--<input class="easyui-datebox" editable="false" name="adjustDate" id="endDate">-->
            </td>
        </tr>
        <tr>
            <td>上次保养公里数</td>
            <td>
                <input class="layui-input" v-model="form.preLength" placeholder="请输入数字"
                       onkeyup="this.value=this.value.replace(/\D/g,'')">
                <!--<input class="easyui-datebox" editable="false" name="leaveDate" id="startDate">-->
            </td>
            <td>本次保养公里数</td>
            <td>
                <input class="layui-input" v-model="form.currentLength" placeholder="请输入数字"
                       onkeyup="this.value=this.value.replace(/\D/g,'')">
                <!--<input class="easyui-datebox" editable="false" name="adjustDate" id="endDate">-->
            </td>
        </tr>
    </table>
    <div style="margin-top: 2em">
        <label>维护类型&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input type="radio" v-model="form.maintainType" value="1">常规保养</input>&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" v-model="form.maintainType" value="2">非常规保养</input>&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" v-model="form.maintainType" value="3">维修</input>
    </div>
    <div v-if="form.maintainType!=1" style="margin-top: 2em">
        <label>维修项目</label>
        <label v-if="instanceId==''">
            <span class="layui-btn" @click="addMaintain()">新增</span>
            <span class="layui-btn" @click="removeMaintain()" v-if="checkedCount!=0">删除</span>
        </label>
        <table border="1" style="border-collapse: collapse;width: 100%;margin-top: 2em">
            <tr>
                <th style="width: 30px"></th>
                <th>序号</th>
                <th>项目</th>
                <th>费用</th>
                <th>备注</th>
            </tr>
            <tr v-for="(item,i) in form.maintainList" :key="i">
                <td><input type="checkbox" :id="'checkbox'+item.number" :value="i"
                           @click="handelCheck(`${item.number}`)"/></td>
                <td><input class="layui-input" v-model="item.number"></td>
                <td><input class="layui-input" v-model="item.project"></td>
                <td><input class="layui-input" v-model="item.money" placeholder="请输入数字"
                           @input="handleTotal"
                           onkeyup="this.value=this.value.replace(/\D/g,'')"></td>
                <td><input class="layui-input" v-model="item.comment"></td>
            </tr>
            <tr v-if="form.maintainList.length>0">
                <td></td>
                <td>合计</td>
                <td></td>
                <td>{{form.total}}</td>
                <td></td>
            </tr>
        </table>
    </div>
    <br>
</form>
</body>
<script type="text/javascript" src="js/design.js"></script>
<script type="text/javascript" src="js/multiSelect.js"></script>
<script src="../../../assets/js/vue.min.js"></script>
<script>
    function submitForm() {
        doSubmitForm();
    }

    var that;
    new Vue({
        el: '#fm',
        data: function () {
            return {
                templateId: '12',
                instanceId: '',
                checkedCount: 0,
                form: {
                    userName: '',
                    maintainType: '1',
                    department: '',
                    carNum: "",
                    driver: '',
                    preLength: '',
                    currentLength: '',
                    maintainList: [],
                    total: '',
                },
            }
        },
        mounted: function () {
            that = this;
            window.doSubmitForm = this.submitForm
            var instanceId = getUrlParam();
            this.instanceId = instanceId;
            if (instanceId) {
                //审批进入
                drawApprove(instanceId);
                $("input").prop('readonly', true);
                $("#app").hide();
                $(".layui-layer-btn").hide();
                //查询流程详情
                $.post('/office/flowStepInstance/queryDetail', {id: instanceId}, function (res) {
                    if (res.code == 200) {
                        that.form = res.obj;
                        var maintainList = JSON.parse(res.obj.maintainList);
                        that.form.maintainList = maintainList;
                        $("#crtDate").text(formatDate(new Date(res.obj.crtDate)));
                    }
                });
            } else {
                //新建流程
                drawAdd();
                var html = ' <button onclick="addExecute()">添加执行人</button>';
                $(html).appendTo("#designButtonList");
                var today = formatDate(new Date())
                $("#crtDate").text(today);
                this.form.userName = getUserName()
                this.form.department = getOrgName();
                //渲染流程审批节点
                $.post('/office/flowStepTemplate/getTemplateStep', {
                    userId: getUserId(),
                    templateId: that.templateId
                }, function (res) {
                    if (res.code == 200) {
                        if (res.obj) {
                            drawFlowStep(res.obj.flowNodes);
                        }
                    }
                })
            }
        },
        methods: {
            handleTotal() {
                let total = 0;
                this.form.maintainList.map(item => {
                    total += Number(item.money);
                })
                this.form.total = total
            },
            handelCheck(e) {
                let checked = $("#checkbox" + e).is(':checked');
                if (checked) {
                    this.checkedCount -= 1
                } else {
                    this.checkedCount += 1
                }
            },
            addMaintain() {
                this.form.maintainList.push({
                    number: this.form.maintainList.length + 1,
                    project: '',
                    money: '',
                    comment: ''
                })
            },
            removeMaintain() {
                $("input:checkbox:checked").each(function () {
                    let index = $(this).val()
                    that.form.maintainList = that.form.maintainList.filter(item => item.number != index)
                })
            },
            submitForm() {
                var flag = true;
                Object.keys(this.form).forEach(item => {
                    if (flag && (item != 'maintainList') && (item != 'total')) {
                        var value = this.form[item];
                        if (!value) {
                            flag = false
                        }
                    }
                })
                if (!flag) {
                    showAlert("请补全表单详情后提交哦");
                    return false;
                }
                for (var i = 0; i < this.form.maintainList.length; i++) {
                    var item = this.form.maintainList[i];
                    if ((!item.project) || (!item.money)) {
                        showAlert('维修项目和金额必填')
                        return
                    }
                }
                if (!this.isVehicleNumber(this.form.carNum)) {
                    showAlert('车牌号不合法！')
                    return
                }
                if (Number(this.form.preLength) >= Number(this.form.currentLength)) {
                    showAlert('本次保养公里数不得小于上次！')
                    return

                }
                layer.confirm('确认提交', function (index) {
                    var params = {};
                    params.userId = localStorage.getItem("userId");
                    params.userName = getUserName();
                    params.department = getOrgName();
                    params.title = $("#title").text();
                    params.content = 'apply/maintain';
                    params.templateId=that.templateId
                    params.businessStr = JSON.stringify(that.form)
                    doSubmit('/office/flowWork/addBusinessFlow', params)
                })
            },
            //车牌号验证方法

            isVehicleNumber(vehicleNumber) {
                vehicleNumber = vehicleNumber.toUpperCase()
                var xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
                var creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
                if (vehicleNumber.length == 7) {
                    return creg.test(vehicleNumber);
                } else if (vehicleNumber.length == 8) {
                    return xreg.test(vehicleNumber);
                } else {
                    return false;
                }

            }
        },
        watch: {
            'form.maintainList': function () {
                let newLength = this.form.maintainList.length;
                for (let i = 0; i < newLength; i++) {
                    this.form.maintainList[i].number = i + 1;
                }
            }
        }
    })
    function printPage() {
        window.print();
    }

    var beforePrint = function () {
        $("#button").hide();
        $("#notice").hide();

    };

    var afterPrint = function () {
        $("#button").show();
        $("#notice").show();
    };

    if (window.matchMedia) {   //返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function (mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
</script>

</html>
